<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="${title!}" name="description">
    <title>单文件上传</title>
    <%include("/inc/header.html"){}%>
    <style>
        /* 在线文件的文件预览图标 */
        .preview > .file-suffix {
            display: block;
            margin: 30px auto;
            width: 75px;
            height: 100px;
            background-image: url("${base}/static/plugins/webuploader/images/file-icons.png");
            background-image: url("${base}/static/plugins/webuploader/images/file-icons.gif") \9;
            background-position: -140px center;
            background-repeat: no-repeat;
        }

        .preview > .file-type-dir {
            background-position: 0 center;
        }

        .preview > .file-type-file {
            background-position: -140px center;
        }

        .preview > .file-type-filelist {
            background-position: -210px center;
        }

        .preview > .file-type-zip,
        .preview > .file-type-rar,
        .preview > .file-type-7z,
        .preview > .file-type-tar,
        .preview > .file-type-gz,
        .preview > .file-type-bz2 {
            background-position: -280px center;
        }

        .preview > .file-type-xls,
        .preview > .file-type-xlsx {
            background-position: -350px center;
        }

        .preview > .file-type-doc,
        .preview > .file-type-docx {
            background-position: -420px center;
        }

        .preview > .file-type-ppt,
        .preview > .file-type-pptx {
            background-position: -490px center;
        }

        .preview > .file-type-vsd {
            background-position: -560px center;
        }

        .preview > .file-type-pdf {
            background-position: -630px center;
        }

        .preview > .file-type-txt,
        .preview > .file-type-md,
        .preview > .file-type-json,
        .preview > .file-type-htm,
        .preview > .file-type-xml,
        .preview > .file-type-html,
        .preview > .file-type-js,
        .preview > .file-type-css,
        .preview > .file-type-php,
        .preview > .file-type-jsp,
        .preview > .file-type-asp {
            background-position: -700px center;
        }

        .preview > .file-type-apk {
            background-position: -770px center;
        }

        .preview > .file-type-exe {
            background-position: -840px center;
        }

        .preview > .file-type-ipa {
            background-position: -910px center;
        }

        .preview > .file-type-mp4,
        .preview > .file-type-swf,
        .preview > .file-type-mkv,
        .preview > .file-type-avi,
        .preview > .file-type-flv,
        .preview > .file-type-mov,
        .preview > .file-type-mpg,
        .preview > .file-type-mpeg,
        .preview > .file-type-ogv,
        .preview > .file-type-webm,
        .preview > .file-type-rm,
        .preview > .file-type-rmvb {
            background-position: -980px center;
        }

        .preview > .file-type-ogg,
        .preview > .file-type-wav,
        .preview > .file-type-wmv,
        .preview > .file-type-mid,
        .preview > .file-type-mp3 {
            background-position: -1050px center;
        }

        .preview > .file-type-jpg,
        .preview > .file-type-jpeg,
        .preview > .file-type-gif,
        .preview > .file-type-bmp,
        .preview > .file-type-png,
        .preview > .file-type-psd {
            background-position: -140px center;
        }
    </style>
    <style>
        .webuploader-container {
            position: relative;
            text-align: center;
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            margin: 10px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
            width: 260px;
            height: 40px;
            line-height: 40px;
        }

        .webuploader-pick i {
            font-size: 12px;
            color: #474448;
        }

        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px);
            clip: rect(1px, 1px, 1px, 1px);
        }

        .uploader-box {
            margin: 8px;
            border: 3px dashed #e6e6e6;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .fileExtensions {
            font-size: 14px;
            color: #607D8B;
            word-break: break-all;
            word-wrap: break-word;
            padding: 10px;
            vertical-align: middle;
            text-align: center;
        }

        .file-preview {
            top: 0;
            background: #efecec;
            position: absolute;
            width: 98%;
            height: 98%;
            margin: 1%;
            overflow: hidden;
        }

        .file-preview > .remove-file {
            display: none;
        }

        .file-preview:hover > .remove-file {
            position: absolute;
            right: 0px;
            width: 100%;
            text-align: right;
            padding: 5px 15px 5px 5px;
            display: block;
            background: #666666e0;
            cursor: pointer;
            z-index: 99;
            color: #fff;
        }

        .img-preview {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            border: 1px #76927f solid;
        }

        .file-name {
            position: absolute;
            width: 100%;
            height: 30px;
            text-align: center;
            bottom: 0px;
            line-height: 30px;
            color: #ffffff;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.6);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .file-msg {
            position: absolute;
            width: 100%;
            text-align: center;
            background: #6d6868a3;
            height: 100%;
            color: #fff;
        }

        .progress {
            width: 100%;
            display: inline-block;
            position: absolute;
            bottom: 10px;
            background: #1c8848;
            font-size: 12px;
            line-height: 20px;
        }


        .upload-state-done:after {
            content: "\f00c";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 32px;
            position: absolute;
            bottom: 0;
            right: 4px;
            color: #4cae4c;
            z-index: 99;
        }

        .progress-error {
            background-color: red;
        }

        .btns {
            text-align: center;
        }

        .btn-start {
            background: rgb(0, 183, 238);
            color: #fff;
            border: none;
            width: 88px;
            height: 30px;
        }

        .btn-start:hover {
            color: #fff;
            background: rgb(35, 207, 238);
        }

        .verify {
            z-index: 99;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #545f541f;
            top: 0;
        }

        .verify-progress {
            top: 45%;
        }

        .progress-bar {
            -webkit-transition: width .10ms ease;
            -o-transition: width .10ms ease;
            transition: width .10ms ease;
        }

        .progress-msg {
            position: absolute;
            width: 100%;
            text-align: center;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="uploader-box">
        <div id="picker">
            <span>选择文件(<i>小于{{maxFileSizeMsg}}</i>)</span>
        </div>
        <div class="verify" v-if="verifyProgress>0&&verifyProgress<100">
            <div class="progress progress-striped active verify-progress">
                <div :style="{width:verifyProgress+'%'}" class="progress-bar progress-bar-primary">
                </div>
                <div class="progress-msg">
                    文件校验中:{{verifyProgress}}%
                </div>
            </div>
        </div>
        <div class="fileExtensions">支持格式:{{fileExtensions}}</div>
        <div class="file-preview" v-if="uploadedFile.name!=''">
            <div @click="handleRemoveFile" class="remove-file" v-if="uploadedFile.name!=''">
                <i class="fa fa-remove"></i>删除
            </div>
            <div class="preview">
                <i class="file-suffix" :class="fileSuffix" v-if="uploadedFile.thumb==''"></i>
            </div>
            <div class="img-preview" v-if="uploadedFile.thumb!=''">
                <img :src="uploadedFile.thumb" :title="uploadedFile.name">
            </div>
            <div class="file-name" :class="{'upload-state-done': state=='done'}">{{uploadedFile.name}}</div>
            <div :class="{'progress-striped active':state!='done'}" class="progress"
                 v-if="state!=''">
                <div :style="{width:percen+'%'}" class="progress-bar progress-bar-primary"></div>
                <div :class="{'progress-error':httpError}" class="progress-msg">
                    <span v-if="state!='done'">{{percen}}%</span>
                    <span v-if="state=='done'">{{uploadMsg}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="btns">
        <button class="btn btn-start" @click="handleOk">${i18n("confirm")}</button>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-start" @click="handleChange">${i18n("cancel")}</button>
    </div>
</div>
</body>
<script src="${base}/static/plugins/webuploader/js/webuploader.js?_=${productVersion}" type="text/javascript"></script>
<script>
    var fromFile, index;
    if (window.name != "") {
        index = parent.layer.getFrameIndex(window.name);
    }
    // 优化retina, 在retina下这个值是2
    var ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 265 * ratio,
        thumbnailHeight = 220 * ratio,
        uploader, vm = new Vue({
            el: '#container',
            data: {

                maxFileSize: "${data.maxFileSize}",
                maxFileSizeMsg: "${data.maxFileSizeMsg}",
                url: "${data.url}",
                module: "${data.module}",
                fileExtensions: "${data.FILE_EXTENSIONS}",
                fileType: "${data.FILE_TYPE}",
                mimeTypes: "${data.MIME_TYPES}",
                //上传完成后自动执行 ok 事件
                auto: "${data.auto}",
                percen: 0,
                verifyProgress: 0,
                uploadedFile: {
                    id: "${data.uploadedFile.id!}",
                    name: "${data.uploadedFile.name!}",
                    ext: "${data.uploadedFile.ext!}",
                    thumb: "",
                    thumbError: "",
                    md5: "",
                },
                state: "",
                md5check: false,
                uploadMsg: "",
                httpError: false,
                fileSuffix: 'file-type-psd',
            },
            methods: {
                handleOk: function () {
                    var stats = uploader.getStats();
                    if (stats.progressNum > 0) {
                        var msgindex = parent.layer.confirm('文件还在上传中,请稍后...', {
                            btn: ['再等等', '取消']
                        }, function () {
                            layer.close(msgindex);
                        }, function () {
                            layer.close(msgindex);
                        });
                    } else {
                        window.parent.HUCuploadFile.ok({
                            // data 兼容旧用法
                            data: this.uploadedFile.id,
                            id: this.uploadedFile.id,
                            name: this.uploadedFile.name,
                            ext: this.uploadedFile.ext
                        });
                    }
                },
                handleChange: function () {
                    parent.layer.close(index);
                },
                handleGetFormData: function () {
                    var data = new Object();
                    data["module"] = this.module;
                    if (window.parent.HUCuploadFile) {
                        for (var key in  window.parent.HUCuploadFile.formData) {
                            data[key] = window.parent.HUCuploadFile.formData[key];
                        }
                    }
                    return data;
                },
                handleRemoveFile: function () {
                    this.uploadedFile = {
                        id: "",
                        name: "",
                        ext: "",
                        thumb: "",
                        thumbError: "",
                    }
                    this.percen = 0,
                        this.verifyProgress = 0;
                    this.state = "";
                    this.md5check = false;
                    this.uploadMsg = "";
                    this.httpError = false;
                    if (fromFile) {
                        uploader.removeFile(fromFile);
                    }
                },
                makeThumbSrc: function (file) {
                    if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') > -1) {
                        // 创建缩略图
                        uploader.makeThumb(file, function (error, src) {
                            vm.uploadedFile.thumbError = "";
                            if (error) {
                                vm.uploadedFile.thumbError = "不能预览";
                            } else {
                                vm.uploadedFile.thumb = src;
                            }
                        }, thumbnailWidth, thumbnailHeight);
                    } else {
                        this.fileSuffix = "file-type-" + this.uploadedFile.ext.toLowerCase();
                    }
                },
                initWebuploader: function () {
                    // WebUploader提供的钩子（hook），在文件上传前先判断服务是否已存在这个文件
                    WebUploader.Uploader.register({'before-send-file': 'beforeSendFile'}, {
                        //整个文件上传前
                        beforeSendFile: function (file) {
                            var that = this;
                            var deferred = WebUploader.Deferred();
                            if (vm.url == "/File/FileUploadact") {
                                //上传前请求服务端,判断文件是否已经上传过
                                $.post("${base!}/File/md5check", {md5: vm.uploadedFile.md5},
                                    function (data) {
                                        vm.md5check = data.ok;
                                        if (data.ok) {
                                            //跳过如果存在则跳过
                                            that.owner.skipFile(file);
                                        }
                                        // 继续后面行为
                                        deferred.resolve();
                                    });
                            } else {
                                // 继续后面行为
                                deferred.resolve();
                            }
                            return deferred.promise();
                        }
                    });
                    uploader = WebUploader.create({
                        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        resize: false,
                        auto: false,
                        fileSingleSizeLimit: this.maxFileSize,
                        // swf文件路径
                        swf: base + '/static/plugins/webuploader/js/Uploader.swf',
                        // 文件接收服务端。
                        server: base + this.url,
                        fileNumLimit: 1,
                        pick: {id: '#picker', multiple: false},
                        prepareNextFile: true,
                        accept: {
                            title: 'file',
                            extensions: this.fileExtensions,
                            mimeTypes: this.mimeTypes
                        },
                        //formData通过iframe去父页面取
                        formData: this.handleGetFormData()
                    });
                    uploader.on('all', this.handleAllUploaderState);
                    uploader.on('error', this.handleUploaderError);
                    uploader.on('fileQueued', this.handleFileQueued);
                    uploader.on('uploadProgress', this.handleUploadProgress);
                    uploader.on('uploadError', this.handleUploadError);
                    uploader.on('uploadSuccess', this.handleUploadSuccess);
                },
                handleUploadSuccess: function (file, response) {
                    this.httpError = false;
                    if (this.md5check && response == undefined) {
                        this.handleMd5FileUploadact();
                    } else if (response.ok) {
                        this.uploadedFile.id = response.data;
                        this.uploadMsg = "上传成功";
                        if (this.auto == 'true') {
                            this.handleOk();
                        }
                    } else {
                        this.httpError = true;
                        this.uploadMsg = response.msg;
                    }
                },
                handleMd5FileUploadact: function () {
                    $.post("${base!}/File/Md5FileUploadact", {
                        md5: vm.uploadedFile.md5,
                        name: vm.uploadedFile.name,
                        module: this.module
                    }, function (data) {
                        if (data.ok) {
                            vm.uploadedFile.id = data.data;
                            vm.uploadMsg = "上传成功(秒传)";
                            vm.percen = 100;
                            if (vm.auto == 'true') {
                                vm.handleOk();
                            }
                        } else {
                            this.httpError = true;
                            this.uploadMsg = data.msg;
                        }
                    });
                },
                handleUploadError: function (file, response) {
                    if (response == "abort") {
                        this.uploadMsg = "上传失败！链接被服务器主动中止！";
                    } else {
                        this.uploadMsg = "上传失败！HTTP状态：" + response;
                    }
                    this.httpError = true;
                }
                ,
                handleUploadProgress: function (file, percentage) {
                    // 文件上传过程中创建进度条实时显示。
                    this.percen = Number(percentage * 100).toFixed(2);
                },
                handleFileQueued: function (file) {
                    this.percen = 0;
                    this.verifyProgress = 0;
                    this.uploadedFile.ext = file.ext;
                    this.uploadedFile.name = file.name;
                    this.makeThumbSrc(file);
                    this.handleMd5(file).progress(function (percentage) {
                        vm.verifyProgress = Number(percentage * 100).toFixed(2);
                    }).then(function (val) {
                        vm.uploadedFile.md5 = val;
                        //md5效验完成就进行上传
                        uploader.upload();
                    })
                    fromFile = file;
                    return true;
                }
                ,
                handleAllUploaderState: function (type) {
                    if (type === 'startUpload') {
                        this.state = "uploading";
                    } else if (type === 'stopUpload') {
                        this.state = "paused";
                    } else if (type === 'uploadFinished') {
                        this.state = "done";
                    }
                }
                ,
                handleUploaderError: function (errorType) {
                    switch (errorType) {
                        case 'Q_EXCEED_NUM_LIMIT':
                            window.parent.layer.msg("错误：上传文件数量过多！");
                            break;
                        case 'Q_EXCEED_SIZE_LIMIT':
                            window.parent.layer.msg("错误：文件总大小超出限制！");
                            break;
                        case 'F_EXCEED_SIZE':
                            window.parent.layer.msg("错误：文件大小超出限制！");
                            break;
                        case 'Q_TYPE_DENIED':
                            window.parent.layer.msg("错误：禁止上传该类型文件！");
                            break;
                        case 'F_DUPLICATE':
                            window.parent.layer.msg("错误：请勿重复上传该文件！");
                            break;
                        default:
                            window.parent.layer.msg('错误代码：' + errorType);
                            break;
                    }
                }
                ,
                handleMd5: function (file) {
                    var md5Object = uploader.md5(file);
                    var md5 = md5Object.md5,
                        deferred = md5Object.deferred,
                        blob = md5Object.blob;
                    md5.on('progress load', function (e) {
                        e = e || {};
                        deferred.notify(e.total ? e.loaded / e.total : 1);
                    });
                    md5.on('complete', function () {
                        deferred.resolve(md5.getResult());
                    });
                    md5.on('error', function (reason) {
                        deferred.reject(reason);
                    });
                    md5.loadFromBlob(blob);
                    return deferred.promise();
                }
            },
            created: function () {

                if (this.uploadedFile.ext != '') {
                    this.fileSuffix = "file-type-" + this.uploadedFile.ext.toLowerCase();
                }
            },
            updated: function () {
            },
            mounted: function () {
                this.initWebuploader();
            }
        });
</script>
</html>